<template>
  <a-row align="stretch" class="min-h-screen bg-gradient-to-r from-blue-900 to-blue-700">
    <a-col :lg="16" :md="12" :sm="24" :xs="24" class="flex items-center justify-center">
      <div class="text-center">
        <!-- 删除Logo图片 -->
        <!-- <img
          src="../assets/gov-logo.png"
          alt="logo"
          class="mx-auto mb-4"
          style="height: 60px"
        /> -->
        <h1 class="text-4xl font-bold text-white mt-6 login-title">林地指标交易平台</h1>
      </div>
    </a-col>
    <a-col
        :lg="8"
        :md="12"
        :sm="24"
        :xs="24"
        class="flex flex-col items-center justify-center bg-white login-form-container"
    >
      <div class="login-header">
        <h2 class="font-bold text-3xl text-gray-800 mb-2">林地指标交易平台管理系统</h2>
        <div class="flex items-center justify-center my-5 text-gray-500 space-x-2">
          <span class="h-[1px] w-16 bg-gray-300"></span>
          <span>账号密码登录</span>
          <span class="h-[1px] w-16 bg-gray-300"></span>
        </div>
      </div>
      <a-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="w-[320px]">
        <a-form-item feedback field="username" hide-label>
          <a-input
              v-model="loginForm.username"
              allow-clear
              placeholder="请输入用户名"
              size="large"
              @keydown.enter="loginSubmitClick()"
          >
            <template #prefix>
              <icon-user/>
            </template>
          </a-input>
        </a-form-item>
        <a-form-item feedback field="password" hide-label>
          <a-input-password
              v-model="loginForm.password"
              allow-clear
              placeholder="请输入密码"
              size="large"
              @keydown.enter="loginSubmitClick()"
          >
            <template #prefix>
              <icon-lock/>
            </template>
          </a-input-password>
        </a-form-item>
        <a-form-item v-if="isCaptchaEnable" feedback field="captcha" hide-label>
          <div class="flex items-center justify-between h-[100%]">
            <a-input
                v-model="loginForm.captcha"
                allow-clear
                class="w-7/12"
                placeholder="请输入验证码"
                size="large"
                @keydown.enter="loginSubmitClick()"
            >
              <template #prefix>
                <icon-robot/>
              </template>
            </a-input>
            <div class="w-4/12">
              <img
                  :src="imageCaptchaBase64"
                  alt="刷新"
                  class="w-[100%] h-[100%] cursor-pointer captcha-img"
                  @click="getImageCaptcha"
              />
            </div>
          </div>
        </a-form-item>
        <a-form-item hide-label>
          <a-button
              :loading="loginLoading"
              class="w-[100%] login-btn"
              type="primary"
              @click="loginSubmitClick()"
          >登录
          </a-button
          >
        </a-form-item>
      </a-form>
      <div class="login-info">
        <p>管理员账号/密码：admin/111111</p>
        <p class="mt-2">租户账号/密码：dongdong/111111</p>
      </div>
      <div class="text-right w-full mt-2">
        <a class="text-blue-700 text-sm" href="tel:400-xxxx-xxx">技术支持</a>
      </div>
      <div class="login-footer">
        <p class="text-gray-500 text-sm mt-8">© 2023 林地指标交易平台管理系统 版权所有</p>
      </div>
    </a-col>
  </a-row>
</template>

<!-- script部分保持不变 -->
<script setup>
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import {getImageCaptchaApi, loginApi} from "~/api/basic/user.js";
import {setToken} from "~/utils/cookie";
import {useRouter} from "vue-router";
//路由
const router = useRouter();
//全局实例
const {proxy} = getCurrentInstance();

/****************** 登录 ******************/
//登录表单
const loginFormRef = ref(null);
const loginForm = reactive({
  username: "admin",
  password: "111111",
  captcha: null,
  captchaId: null,
});
//登录加载loading
const loginLoading = ref(false);
//登录表单验证规则
const loginRules = {
  username: [{required: true, message: "用户名不能为空", trigger: "submit"}],
  password: [{required: true, message: "密码不能为空", trigger: "submit"}],
};
//登录点击事件
const loginSubmitClick = () => {
  //登录表单验证
  loginFormRef.value.validate((valid) => {
    if (valid) {
      return false;
    }
    //加载中
    loginLoading.value = true;
    //登录请求
    loginApi(loginForm)
        .then((res) => {
          //登录成功消息提示
          proxy.$msg.success("登陆成功");
          //存储token
          setToken(res.tokenValue);
          //跳转页面到后台首页
          router.push("/");
        })
        .catch((err) => {
          //显示错误消息
          proxy.$msg.error(err.message || "验证码错误或登录失败");
          //清空输入的验证码
          loginForm.captcha = null;
          //登录失败，重新刷新验证码
          getImageCaptcha();
        })
        .finally(() => {
          //加载完毕
          loginLoading.value = false;
        });
  });
};

/****************** 验证码 ******************/
//图形验证码base64
const imageCaptchaBase64 = ref("");
//是否需要验证码
const isCaptchaEnable = ref(false);
//获取图形验证码
// 添加验证码加载状态变量
const captchaLoading = ref(false);

// 修改获取验证码方法
const getImageCaptcha = () => {
  captchaLoading.value = true;
  getImageCaptchaApi()
      .then((res) => {
        isCaptchaEnable.value = res.enable;
        if (isCaptchaEnable.value) {
          loginRules.captcha = [
            {required: true, message: "验证码不能为空", trigger: "submit"},
          ];
          imageCaptchaBase64.value = "data:image/jpg;base64," + res.captchaImg;
          loginForm.captchaId = res.captchaId;
        } else {
          // 如果不需要验证码，确保移除验证规则
          delete loginRules.captcha;
        }
      })
      .catch((err) => {
        console.error("获取验证码失败:", err);
        proxy.$msg.error("获取验证码失败，请刷新页面重试");
      })
      .finally(() => {
        captchaLoading.value = false;
      });
};

onMounted(() => {
  //获取图形验证码
  getImageCaptcha();
});
</script>
<style scoped>
@keyframes floating {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

.login-pic-animation {
  animation: floating 3s ease infinite;
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.2));
}

.login-title {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.login-form-container {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 2.5rem 2rem;
  min-width: 340px;
  background: #fff;
}

.login-btn {
  background-color: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  font-weight: bold;
  font-size: 16px;
  border-radius: 4px;
}

.login-btn:hover {
  background-color: #153fa1 !important;
  border-color: #153fa1 !important;
}

.login-btn:hover {
  background-color: #a50d26 !important;
  border-color: #a50d26 !important;
}

.login-info {
  margin-top: 1.5rem;
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 4px;
  border-left: 4px solid #1d4ed8;
  font-size: 14px;
}

.captcha-img {
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.captcha-img:hover {
  transform: scale(1.02);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.login-footer {
  position: absolute;
  bottom: 1rem;
  width: 100%;
  text-align: center;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .login-form-container {
    box-shadow: none;
    padding: 1rem 0;
  }

  .login-footer {
    position: relative;
    margin-top: 2rem;
  }
}
</style>
